<template>
    <!-- 卡片中的item -->
    <!-- 封装为sku-card-children组件使用 -->
    <div class="border py-1 px-2 rounded mr-2 position-relative d-flex align-items-center">
        <!-- 需要根据sku_card.type选项来切换是出现颜色选择器还是图片选择 -->
        <div v-if="type != 0">
            <!-- 颜色选择器 -->
            <el-color-picker v-if="type === 1" class="d-flex align-items-center" size="mini" :value='item.color'
                @change="onColorChange"></el-color-picker>
            <!-- 图片选择 -->
            <template v-else>
                <span v-if="!item.image" class="btn btn-light border" @click="chooseImage">
                    <i class="el-icon-plus"></i>
                </span>
                <img v-else :src="item.image" class="border" style="width:45px;height:45px;cursor:pointer"
                    @click="chooseImage" />
            </template>
        </div>

        <input v-if="type === 0" :value="item.text" class="form-control text-center border-0"
            style="width: 80px; font-size: 15px;" @input="inputChange" />
        <!-- 删除 -->
        <span class="btn btn-light p-0 position-absolute" style="line-height: 1; right: -7px;top: -7px;"
            @click="delSkuValueEvent({ cardIndex: cardIndex, valueIndex: index })">
            <i class="el-icon-circle-close"></i></span>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'

export default {
    inject: ['app', 'layout'],
    // 从父组件传递过来的值
    props: {
        type: {
            type: Number,
            default: 0,
        },
        item: Object,
        index: Number,
        cardIndex: Number,
        valueIndex: Number,
    },
    wacth: {
        // 判断规格卡片上方选择的类型是什么
        type(newValue) {
            let keys = ['text', 'color', 'image']
            let defaultVal = ['属性值', '#FFFFFF', '/favicon.ico']
            // this.item.value = this.item[keys[newValue]]?this.item[keys[newValue]]:defaultVal[newValue]
            // this.updateSkuValueEvent()
            let val = this.item[keys[newValue]] ? this.item[keys[newValue]] : defaultVal[newValue]
            this.updateSkuValue({
                cardIndex: this.cardIndex,
                valueIndex: this.index,
                key: 'value',
                value: val
            })
            this.updateSkuValueEvent()
        }
    },
    methods: {
        ...mapMutations('goods_create', ['delSkuValue', 'updateSkuValue']),
        delSkuValueEvent() {
            this.layout.showLoading()

            this.$axios.post('/admin/goods_skus_card_value/' + this.item.id + '/delete', {
            }, {
                token: true
            }).then(() => {
                this.layout.hideLoading()
                // let data = res.data.data
                this.delSkuValue({
                    cardIndex: this.cardIndex,
                    valueIndex: this.index
                })
            }).catch(() => {
                this.layout.hideLoading()
            })
        },
        updateSkuValueEvent() {
            let keys = ['text', 'color', 'image']
            // this.item.value = this.item[keys[this.type]]
            this.updateSkuValue({
                cardIndex: this.cardIndex,
                valueIndex: this.index,
                key: 'value',
                value: this.item[keys[this.type]]
            })

            this.$axios.post('/admin/goods_skus_card_value/' + this.item.id, this.item, {
                token: true
            }).catch((err) => {
                console.log(err);

            })
        },
        inputChange(e) {

            // console.log(this.target.value)
            this.vModel('text', e.target.text)
            this.vModel('value', e.target.value) // 新增：同步 value 字段
        },
        // 修改指定规格卡片的规格属性
        // vModel方法的作用: 修改指定规格卡片的规格属性，为何不直接使用updateSkuValue方法？
        // 因为updateSkuValue方法需要传递三个参数，而vModel方法只需要传递两个参数，所以需要使用vModel方法。
        // 可以理解为vModel方法是一个简化版的updateSkuValue方法。
        // 此处的vmodel不是vuex的vmodel，而是vue的v-model，是vue的语法糖。
        // 语法糖: 语法糖是一种语法，它可以让代码更简洁，更易读。
        vModel(key, value) {
            this.updateSkuValue({
                cardIndex: this.cardIndex,
                valueIndex: this.index,
                key,
                value,
            })
        },
        // 选择图片
        chooseImage() {
            // 下面的chooseImage是来自于app.vue中的函数
            // 传递max参数为3，即最大选中chooseImage=3
            this.app.chooseImage((res) => {
                // 拿到当前第一个元素的url替换掉上方的span
                // console.log(res[0].url);
                // 修改image值对应到store中的good_create.js中的sku_card.list中的image的值
                this.vModel('image', res[0].url)
                this.vModel('value', res[0].url) // 新增

            }, 3);
        },
        // 监听颜色选择
        onColorChange(e) {
            this.vModel('color', e)
            this.vModel('value', e) // 新增
        }
    }
}
</script>